/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TextInput,
    TouchableWithoutFeedback,
    Platform
} from 'react-native';

import FormStatus from './FormStatus'

let self = null;

export default class DefaultInput extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        placeholder: React.PropTypes.string,
        keyboardType: React.PropTypes.string,
        onChangeText: React.PropTypes.func,
        secureTextEntry: React.PropTypes.bool,
        maxLength: React.PropTypes.number,
        control: React.PropTypes.string,
        inputValue: React.PropTypes.any,
        suffix: React.PropTypes.string,
        textStyle: React.PropTypes.number,
    }

    static defaultProps = {
        keyboardType: 'default',
        secureTextEntry: false,
        control: FormStatus.EDIT
    }

    constructor(prop) {
        super(prop)
    }

    render() {
        return (
            <View style={[base.rowCC, styles.fieldBox, this.props.style]}>
                <View style={[base.rowCC, styles.inputBox]}>
                    <TextInput
                        value={this.props.inputValue ? this.props.inputValue.toString() : ''}
                        editable={this.props.control !== FormStatus.SUBMITTING}
                        maxLength={this.props.maxLength}
                        onChangeText={(text) => this.props.onChangeText(text)}
                        keyboardType={this.props.keyboardType}
                        autoCorrect={false}
                        autoCapitalize="none"
                        secureTextEntry={this.props.secureTextEntry}
                        underlineColorAndroid="transparent"
                        multiline={false}
                        placeholder={this.props.placeholder}
                        placeholderTextColor={layout.FORM_AUX_FONT_COLOR}
                        style={[Platform.OS === 'ios' ? styles.input : styles.inputAndroid, this.props.textStyle]}/>
                </View>
                {
                    this.props.suffix? <Text allowFontScaling={false} style={styles.suffix}>{this.props.suffix}</Text> : <View/>
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    fieldBox: {
        flex: 1,
        alignSelf: 'stretch',
    },
    inputBox: {
        flex: 1,
    },
    input: {
        flex: 1,
        height: layout.height(40),
        color: layout.FORM_FONT_COLOR,
        fontSize: layout.font(28),
        textAlign: 'right',
    },
    inputAndroid: {
        flex: 1,
        color: layout.FORM_FONT_COLOR,
        fontSize: layout.font(28),
        textAlign: 'right',
    },
    suffix: {
        paddingLeft: layout.GAP_HORIZONTAL_SMALL,
        fontSize: layout.font(30),
        color: layout.FORM_FONT_COLOR
    }
});